{% extends base.html %}

{% block head %}
    <!-- <link rel="stylesheet" href="/css/table.css"/> -->
    <link rel="stylesheet" type="text/css" href="/static/lib/bootstrap-tagsinput/bootstrap-tagsinput.css"/>

<style>

.tool-div {
    font-size: medium;
}

.tool-div a {
    font-size: medium;
    color: blue;
}

.tool-description {
    font-size: small;
    padding-top: 3px;
}


.note {
    float: inherit;
    border: solid 1px;
    border-color: #ccc;
    padding: 10px;
    margin-bottom: 10px;
}

.note-head {
    font-size: 20px;
}

.note-name {
    /*font-size: 20px;*/
}

.note-name a {
    font-size: medium;
    color: blue;
}

.note-content-short {
    font-size: small;
    word-break: break-all;
}

.note-last-modify-time,
.note-last-visit-time {
    padding-left: 2px;
    padding-top: 2px;
    font-size: small;
    color: green;
}

.note-related {
    font-size: 6px;
    padding-left: 5px;
    color: red;
    display: none;
}
.note-visited-cnt {
    float: right;
    font-size: small;
}

</style>
{% end %}

{% block body %}
    {% include "file/header.html" %}
   <br/>
   <script type="text/javascript">$("#menu-file").addClass("active");</script>

   <!-- Files -->
   <div class="">
        {% for i, file in enumerate(files) %}
            <div class="note">
                <div class="note-visited-cnt">访问指数:{{file.visited_cnt}}</div>
                <div class="note-name">
                    <a href="{{file.url}}">{{file.name}}</a>
                </div>
                
                {% if "raw" in file %}
                    <pre>{{ file.raw }}</pre>
                {% else %}
                    <div class="note-content-short">{{file.content[:100]}}</div>
                {% end %}
                    <div class="note-last-visit-time">最近编辑:{{file.smtime}}</div>
                <!-- <div class="note-last-modify-time">最近编辑:{{file.smtime}}</div> -->
                <div class="note-related">
                    <input type="text" data-role="tagsinput" value="{{file.related}}"/>
                </div>
                <div class="note-option">
                </div> 
            </div>
        {% end %}
    </div>
    
{% if "page" in globals() %}
    <p><span>Total {{?pages}}</span>
        <input id="targetPage"/> <button onclick="goToPage()">GO</button>
        {% if page > 1 %}
        <a href="/file?option=list&page={{page-1}}">Prev</a>
        {% end %}
        <a href="/file?option=list&page={{page}}"><span style="background:blue;color:white">{{page}}</span></a>
        {% if page < pages %}
        <a href="/file?option=list&page={{page+1}}">Next</a>
        {% end %}
    </p>
{% end %}
    <script>
        function goToPage() {
            var value = $('#targetPage').val();
            location.href = '/file?option=list&page=' + (value);
        }
    </script>

<script type="text/javascript" src="/static/lib/jquery.qrcode/jquery.qrcode.min.js"></script>
<script type="text/javascript" src="/static/lib/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>

{% end %}